import { Component } from 'react';
import * as React from 'react';

export interface Nagget {
	type: 'text' | 'image' | 'url' | 'audio' | 'video';
	content: string;
}

export class NaggetPiece extends Component<Nagget, any> {
	constructor(props: Nagget) {
		super(props);
	}

	public render() {
		switch (this.props.type) {
			case 'text':
				return (<span className={"nagget-piece-text"}>{this.props.content}</span>);
			case 'image':
				return (<img className={"nagget-piece-image"} src={this.props.content} alt={""}/>)
			case 'url':
				return (<a className={"nagget-piece-link"} href={this.props.content} />);
			case 'audio':
				return (<audio className={"nagget-piece-audio"} controls={true} src={this.props.content}>Your browser does not support audio elements</audio>);
			case 'video':
				return (<video className={"nagget-piece-video"}>
					<source src={this.props.content} />
					Your browser doesn't support embedded video.
					But you can still <a href={this.props.content}>Download it here.</a>
				</video>)
			default:
				return (<span className={"nagget-piece-error"}>{this.props.type}:{this.props.content}</span>);
		}
	}
}
